<template>
  <div class="newcar">
    <div class="hot">热门品牌</div>
    <div class="cars">
        <van-grid square column-num="5" :border="false">
        <van-grid-item v-for="value in arr" :key="value" :icon=value.img :text=value.msg @click="fun(value.push)"/>
    </van-grid>
    </div>
    <div class="kb"></div>
    <div class="hot one">车型推荐</div>
    <van-sticky>
        <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
  <van-dropdown-item v-model="value3" :options="option3" />
</van-dropdown-menu>
</van-sticky>
    <div class="padding-placer" v-for="(v,index) in arrBus" :key="index" @click="goDetail(v)">
        <div><img :src="v.img1" alt=""></div>
        <div class="xq">
            <div class="xq-1">{{ v.proname }}</div>
            <div  class="xq-2">门店报价<span> {{v.originprice}}</span>万起</div>
            <div class="xq-3">指导价19.93万</div>
            <div class="last"><div class="xq-4">30天提车</div><div><span>5</span>报价<van-icon name="arrow-down" color="red"/></div></div>
        </div>
    </div>
    <div class="foot">
        更多本地车型正火速前来~
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            arr:[
            { img: "//gw.alicdn.com/imgextra/i3/O1CN01ndzJ2O1IGDMKpIVRn_!!6000000000865-2-tps-300-200.png_.webp", msg: "林肯" ,push:""},
            { img: "//gw.alicdn.com/imgextra/i3/2200637533148/O1CN018mWzpF1Z7pMPsPbNM_!!2200637533148-2-tmallcaradmin.png_.webp", msg: "奔腾",push:"" },
            { img: "//gw.alicdn.com/imgextra/i2/O1CN01UU3lvO1wzAryrJU9o_!!6000000006378-2-tps-300-200.png_.webp", msg: "别克" ,push:""},
            { img: "//gw.alicdn.com/imgextra/i2/O1CN01arqfW629Mmfy3VdkJ_!!6000000008054-2-tps-300-200.png_.webp", msg: "日产",push:"" },
            { img: "//gw.alicdn.com/imgextra/i2/2994006427/O1CN01JFiBTD1xLc6ebYs5J_!!2994006427-2-tmallcaradmin.png_.webp", msg: "宝马" ,push:""},
            { img: "//gw.alicdn.com/imgextra/i1/O1CN01DOfFKH1ng5pK9QxCP_!!6000000005118-2-tps-300-200.png_.webp", msg: "丰田" ,push:""},
            { img: "//gw.alicdn.com/imgextra/i3/O1CN01Bdeobw1XDCzue1v3h_!!6000000002889-2-tps-300-200.png_.webp", msg: "沃尔玛",push:"" },
            { img: "//gw.alicdn.com/imgextra/i2/O1CN01l2yYGb20fiVaLBrWD_!!6000000006877-2-tps-300-200.png_.webp", msg: "雪佛兰",push:"" },
            { img: "//gw.alicdn.com/imgextra/i4/O1CN012Xvd5g1JgbnjXKThD_!!6000000001058-2-tps-300-200.png_.webp", msg: "大众" ,push:""},
            { img: "//gw.alicdn.com/tfs/TB12sKEMbr1gK0jSZFDXXb9yVXa-160-160.png_.webp", msg: "更多品牌",push:"/fenlei" },
            ],
            arrBus:[],
            value1: 0,
            value2: 'a',
            value3:'A',
      option1: [
        { text: '默认排序', value: 0 },
        { text: '销量优先', value: 1 },
        { text: '新品优先', value: 2 },
        { text: '价格低', value: 3 },
        { text: '价格高', value: 4 },
      ],
      option2: [
        { text: '品牌', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      option3: [
        { text: '价格', value: 'A' },
        { text: '10万以下', value: 'B'},
        { text: '10-15万', value:'C' },
      ],
        }
    },
    methods:{
        goDetail(v){
            this.$router.push({
                path:"/detail",
                query:{
                    delList:JSON.stringify(v)
                }
            })
        },
        fun(push){
            this.$router.push(`${push}`)
        }
    },
    mounted(){
       this.$http.get('http://118.178.238.19:3001/api/pro/search',{
        params:{
            keyword:'车'
        }
       }).then(res=>{

        console.log(res.data.data);
        this.arrBus=res.data.data
       })
    }

}
</script>

<style lang="scss" scoped>
.newcar{
    background-color: #fff;
}
    .hot{
        box-sizing: border-box;
        font-size: 4.26667vw;
        width: 7.5rem;
        color: #111;
        line-height: 4.26667vw;
        padding: 3.73333vw 0 3.73333vw 3.2vw;
        background-color: #fff;
        font-weight: 700;
    }
    .cars img{
        width: .9rem;
        height: .6rem;
    }
    .cars{
        width: 100%;
        padding: .24rem .3rem;
        background-color: #fff;
        box-sizing: border-box;
    }
    .van-grid-item__content{
        padding: 0;
    }
    .one{
        margin-top: .2rem;
    }
    .kb{
        height: .2rem;
        background-color: #f3f3f3;
    }
    .padding-placer{
    width: 7.02rem;
    height: 2.1rem;
    margin-left: .24rem;
    display: flex;
    align-items: center;
    }
    .padding-placer img{
        width: 1.62rem;
        height: 1.62rem;
    }
    .xq{
        display: flex;
        flex-direction: column;
        margin-left: .2rem;
    }
    .xq-1{
        width: 5rem;
        height: .38rem;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
        font-size: .28rem;
    }
    .xq-2{
        color: red;
        font-weight: 600;
        font-size: .26rem;
    }
    .xq-3{
        color: #999;
    }
    .xq-4{
        color: #ff0036;
        border: 1px solid #ff0036;
        font-size: .2rem;
        padding: .04rem;
        border-radius: 2px;
    }
    .last{
        display: flex;
        justify-content: space-between;
    }
    .foot{
    width: 100%;
    padding-top: .6rem;
    font-size: .28rem;
    color: #999;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
    padding-bottom: .6rem;
    }
</style>